import React, { Component } from "react";
import { Card, List, message } from "antd";

import { ArrowLeftOutlined } from "@ant-design/icons";
import "./detail.css";
export default class PdtDetail extends Component {
  componentWillMount() {
    this.data = this.props.location.state
      ? this.props.location.state
      : (() => {
          message.error("不允许这样访问，请您在商品详情页来访问");
          this.props.history.replace("/product");
          return { name: "", price: "", desc: "" };
        })();
  }
  render() {
    const title = (
      <span>
        <ArrowLeftOutlined
          style={{
            padding: "0 10px",
            color: "green",
            fontSize: "20px",
            fontWeight: "bold",
          }}
          onClick={() => {
            this.props.history.push("-1");
          }}
        />
        <span>商品详情</span>
      </span>
    );
    return (
      <Card title={title}>
        <List>
          <List.Item>
            <span className="title">商品名称:</span>
            <span className="content">{this.data.name}</span>
          </List.Item>

          <List.Item>
            <span className="title">商品描述:</span>
            <span className="content">{this.data.desc}</span>
          </List.Item>
          <List.Item>
            <span className="title">商品价格:</span>
            <span className="content">{this.data.price}</span>
          </List.Item>
          <List.Item>
            <span className="title">所属分类:</span>
          </List.Item>
          <List.Item>
            <span className="title" style={{ height: "140px" }}>
              商品图片:
            </span>

            <span className="content">
              <img
                alt="pic"
                src={
                  "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1823736603,3347587970&fm=26&gp=0.jpg"
                }
              ></img>
              <img
                alt="pic"
                src={
                  "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1823736603,3347587970&fm=26&gp=0.jpg"
                }
              ></img>
            </span>
          </List.Item>
          <List.Item>
            <span className="title">商品详情:</span>
            <span dangerouslySetInnerHTML={{ __html: this.data.detail }}></span>
          </List.Item>
        </List>
      </Card>
    );
  }
}
